<script setup>
import { CountTo } from 'vue3-count-to';
const props = defineProps({
  sesstingList: {
    type: Array,
    default: () => []
  }
});
const numberList = reactive([
  {
    title: '总订单数',
    number: 20,
    rate: 10,
    icon: 'total_order'
  },
  {
    title: '已创建',
    number: 10,
    money: 20,
    icon: 'creating'
  },
  {
    title: '支付成功',
    number: 10,
    money: 20,
    icon: 'pay_success'
  },
  {
    title: '支付失败',
    number: 10,
    money: 20,
    icon: 'pay_error'
  }
]);

const totalList = computed(() => {
  let arr = numberList.concat(
    props.sesstingList.map((item) => {
      item = { title: item.title, ...item.info };
      return item;
    })
  );
  return arr;
});

const singleBill = reactive({
  title: '吃单',
  number: 10,
  money: 20
});

const getImage = (val) => {
  return new URL(`../../assets/icons/svg/${val}.svg`, import.meta.url).href;
};
</script>

<template>
  <div class="container_box grid gap-10 grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-8">
    <div v-for="item in totalList" class="con">
      <SvgIcon :icon-class="item.icon" :style="{ fontSize: item.title == '支付成功' || item.title == '支付失败' ? '64px' : '48px' }"></SvgIcon>
      <div class="w-[78%] font-bold">
        <div class="w-[100%] text-end title">{{ item.title }}</div>
        <div class="flex justify-between mt-4">
          <div class="flex items-end leading-[1] flex-wrap justify-end">
            <CountTo style="font-size: 20px; color: #555" :start-val="0" :end-val="item.number" :duration="1000"> </CountTo>
            <span class="text-[12px] ml-1 pb-0.5">单</span>
          </div>

          <div v-if="item.money" class="flex items-end leading-[1] flex-wrap justify-end">
            <CountTo style="font-size: 20px; color: #555" :start-val="0" :end-val="item.money" :duration="1000" :decimals="2"> </CountTo>
            <span class="text-[12px] ml-1 pb-0.5">USD</span>
          </div>
          <div v-if="item.rate">
            <span class="text-[12px] mr-1">成功率</span>
            <CountTo style="font-size: 20px; color: #555" :start-val="0" :end-val="item.rate" :duration="1000" :decimals="2"> </CountTo>
            <span class="text-[12px] ml-1">%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.con {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 20px;
  padding-block: 30px;
  display: flex;
  border-radius: 4px;
  align-items: center;
  column-gap: 20px;
  justify-content: space-between;
}

.container_box {
  color: #666;
}

.title {
  color: var(--el-color-primary-light-3);
  font-size: 18px;
  font-weight: bold;
}
</style>
